/*
 * @Author: xiaoyan
 * @Date: 2021-11-23 09:31:13
 * @LastEditors: xiaoyan
 * @LastEditTime: 2022-01-26 10:53:38
 * @Description: 组织机构管理
 * @FilePath: \user_auth_front\src\pages\organization\index.tsx
 */
import { Button,message,Popconfirm,Table, Tooltip } from "antd";
import {EditOutlined,DeleteOutlined} from '@ant-design/icons';
import {useState,useEffect} from "react"
import { openModal } from "@/store/modules/app"
import { useDispatch } from 'redux-react-hook';
import add from "./components/add"
import ListHeader from "@/pages/components/listHeader"
import "./index.scss"
//import dataList from "@/mocks/organization"
import { organizationList,organizationDel } from "@/api";
import { IOrganization, IOrganizationListPage, IRes } from "@/interface";
export default ()=>{
    const columns = [
        {
            title:"机构名称",
            dataIndex:"name",
            key:"name",
        },
        {
            title:"修改时间",
            dataIndex:"updateTime",
            key:"updateTime",
        },
        {
            title:"创建时间",
            dataIndex:"createTime",
            key:"createTime",
        },
        {
            title:"操作",
            key:"action",
            width:100,
            render:(val:string,row:any,index:number)=>(
                <>
                    <Tooltip placement="top" title="编辑">
                        <Button type="text" icon={<EditOutlined />} onClick={()=>handleEdit(row.organizationId)}></Button>
                    </Tooltip>
                    <Popconfirm title="确定要删除该机构吗？" okText="确定" cancelText="取消" onConfirm={()=>handleDel(row.organizationId)}>
                        <Tooltip placement="top" title="删除">
                            <Button type="text" icon={<DeleteOutlined />}></Button>
                        </Tooltip>
                    </Popconfirm>
                    
                </>
            ),

        },
    ];
    const [dataList,setDataList] = useState<Array<IOrganization>>([]);
    const dispatch = useDispatch();
    interface Tparmas {
        page?:number,
        limit?:number,
        keyWord?:string,
    }
    //列表
    const ajaxList = (params:Tparmas = {})=>{
        const {page,limit,keyWord} = params;
        const data = {
            page:page || pagination.current,
            limit:limit||pagination.pagesize,
            keyWord,
        };
        organizationList(data).then((res:IRes<IOrganizationListPage>)=>{
            if(res.code === 0){
                setDataList(res.data.list);
                setPagination(Object.assign({},pagination,{current:page,total:res.data.totalCount}));
            }else{
                message.error(res.msg);
            }
        })
    };
    //初始化
    useEffect(()=>{
        ajaxList({page:1});
    },[]);
    //分页
    const changeCurrent = (page:number, pageSize?:number):void=>{
        setPagination(Object.assign(pagination,{current:page,pagesize:pageSize}));
        ajaxList({page:page,limit:pageSize});
    }
    const [pagination,setPagination] = useState({
        current:1,
        pagesize:10,
        total:0,
        onChange:changeCurrent,
    });
    //编辑
    const handleEdit = (id:number)=>{
        Object.assign(modalConf,{title:"编辑机构",data:id});
        const action = openModal(modalConf);
        dispatch(action);
    };
    //单个删除
    const handleDel = (id:number)=>{
        organizationDel({id}).then((res:any)=>{
            if(res.code === 0){
                message.success("删除成功");
                ajaxList({page:1});
            }else{
                message.error(res.msg);
            }
        });
    };
    //新增、编辑弹窗
    const modalConf = {
        views:add,//视图
        width:500,
        title:"新增机构",
        handleBack:ajaxList,
    };
    //复选框
    const [selectedRowKeys,setSelectedRowKeys] = useState([]);
    const onSelectChange = (keys:any)=>{
        setSelectedRowKeys(keys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    return(
        <div className="list-container">
            <ListHeader modalConf={modalConf} selectedRowKeys = {selectedRowKeys} updateList = {ajaxList}/>
            <Table rowKey="organizationId" rowSelection={rowSelection} columns={columns} dataSource={dataList} pagination={pagination} sticky />
        </div>
    );
}